import { Component, ViewChild } from '@angular/core';
import { STColumn, STComponent, STModule } from '@delon/abc/st';
import { NzButtonModule } from 'ng-zorro-antd/button';

interface User {
  id: number;
  picture: {
    thumbnail: string;
  };
  name: {
    last: string;
    first: string;
  };
  nat: string;
  gender: string;
  email: string;
  phone: string;
  price: number;
  registered: Date;
}

@Component({
  selector: 'app-my-new-page',
  templateUrl: './my-new-page.component.html',
  styleUrls: ['./my-new-page.component.less']
})
export class MyNewPageComponent {
  // 页面级别的属性
  pageTitle = '用户管理';
  
  // 表格相关属性
  tableData: any[] = [];
  loading = false;
  hasError = false;
  
  @ViewChild('st', { static: false }) private st!: STComponent;
  
  columns: Array<STColumn<User>> = [
    { title: '编号', index: 'id', width: 80 },
    { title: '头像', index: 'picture.thumbnail', type: 'img', width: 60 },
    { title: '邮箱', index: 'email', width: 80 },
    { title: '电话', index: 'phone' },
    {
      title: { text: '佣金', optional: '（单位：元）', optionalHelp: '计算公式=订单金额 * 0.6%' },
      index: 'price',
      type: 'currency'
    },
    { title: '注册时间', type: 'date', index: 'registered' }
  ];

  constructor() {
    this.loadData();
  }

  /**
   * 加载数据
   */
  private async loadData(): Promise<void> {
    this.loading = true;
    this.hasError = false;
    
    try {
      const response = await this.fetchDataWithFallback();
      
      if (response && response.list) {
        this.tableData = response.list;
      } else {
        this.tableData = [];
      }
    } catch (error) {
      console.warn('数据加载失败，使用空数据:', error);
      this.hasError = true;
      this.tableData = [];
    } finally {
      this.loading = false;
    }
  }

  /**
   * 获取数据（带降级处理）
   */
  private async fetchDataWithFallback(): Promise<any> {
    try {
      // 这里应该是你的实际API调用
      // const response = await this.http.get('/api/users').toPromise();
      // return response;
      
      // 模拟API调用失败的情况
      throw new Error('API 暂时不可用');
    } catch (error) {
      // 返回空数据结构，确保表格能正常显示
      return {
        list: [],
        total: 0
      };
    }
  }

  /**
   * 设置行数据
   */
  setRow(): void {
    if (this.st && this.tableData.length > 0) {
      this.st.setRow(0, { price: 100000000 });
    }
  }

  /**
   * 刷新数据
   */
  refreshData(): void {
    this.loadData();
  }

  /**
   * 添加用户
   */
  addUser(): void {
    // 添加用户逻辑
    console.log('添加用户');
  }

  /**
   * 编辑用户
   */
  editUser(user: User): void {
    // 编辑用户逻辑
    console.log('编辑用户:', user);
  }

  /**
   * 删除用户
   */
  deleteUser(user: User): void {
    // 删除用户逻辑
    console.log('删除用户:', user);
  }
}

@Component({
  selector: 'app-components-st-basic',
  template: `
    <st #st 
        [data]="tableData" 
        [columns]="columns"
        [loading]="loading"
        [noResult]="'暂无数据'">
      <ng-template st-row="custom" let-item let-index="index">
        <nz-badge [nzCount]="index < 2 ? index + 1 : 0"></nz-badge>
      </ng-template>
    </st>
    <button nz-button (click)="setRow()" class="mt-md">Set Row</button>
    <button nz-button (click)="refreshData()" class="mt-md ml-sm">刷新数据</button>
    
    <!-- 错误提示区域 -->
    <div *ngIf="hasError" class="text-center p-lg">
      <i nz-icon nzType="exclamation-circle" nzTheme="outline" class="text-warning"></i>
      <p class="mt-sm">数据加载失败，请稍后重试</p>
      <button nz-button nzType="primary" (click)="refreshData()">重新加载</button>
    </div>
  `
})
export class ComponentsStBasicComponent {
  // 使用静态数据作为备用，确保表格结构始终可见
  tableData: any[] = [];
  loading = false;
  hasError = false;
  
  @ViewChild('st', { static: false }) private st!: STComponent;
  
  columns: Array<STColumn<User>> = [
    { title: '编号', index: 'id', width: 80 },
    { title: '头像', index: 'picture.thumbnail', type: 'img', width: 60 },
    { title: '邮箱', index: 'email', width: 80 },
    { title: '电话', index: 'phone' },
    {
      title: { text: '佣金', optional: '（单位：元）', optionalHelp: '计算公式=订单金额 * 0.6%' },
      index: 'price',
      type: 'currency'
    },
    { title: '注册时间', type: 'date', index: 'registered' }
  ];

  constructor() {
    // 初始化时加载数据
    this.loadData();
  }

  private async loadData(): Promise<void> {
    this.loading = true;
    this.hasError = false;
    
    try {
      // 模拟API调用，你可以替换为实际的HTTP请求
      const response = await this.fetchDataWithFallback();
      
      if (response && response.list) {
        this.tableData = response.list;
      } else {
        this.tableData = [];
      }
    } catch (error) {
      console.warn('数据加载失败，使用空数据:', error);
      this.hasError = true;
      // 即使请求失败，也设置空数组以保持表格结构
      this.tableData = [];
    } finally {
      this.loading = false;
    }
  }

  private async fetchDataWithFallback(): Promise<any> {
    try {
      // 这里应该是你的实际API调用
      // 例如：
      // const response = await this.http.get('/users?total=2&field=list').toPromise();
      // return response;
      
      // 模拟API调用失败的情况
      throw new Error('API 暂时不可用');
    } catch (error) {
      // 返回空数据结构，确保表格能正常显示
      return {
        list: [],
        total: 0
      };
    }
  }

  setRow(): void {
    if (this.st && this.tableData.length > 0) {
      this.st.setRow(0, { price: 100000000 });
    }
  }

  // 手动刷新数据的方法
  refreshData(): void {
    this.loadData();
  }

  // 如果你需要使用URL方式加载数据，可以使用这个方法
  loadDataFromUrl(): void {
    this.loading = true;
    this.hasError = false;
    
    // 使用URL方式时，直接设置为空数组，让st组件自己处理URL请求
    this.tableData = [];
    
    // 如果你想使用st组件的内置URL加载功能，可以这样做：
    // 但需要确保后端API返回正确的数据格式
    setTimeout(() => {
      if (this.st) {
        this.st.load(1); // 重新加载第一页数据
      }
      this.loading = false;
    }, 1000);
  }
}